<template>
  <div id="">
    <headerbox :hasBack='true' :addIcon="true" @addEvent="addEvent" v-if="isNeed"></headerbox>
    <headerbox :hasBack='true' v-else></headerbox>
    <!-- <headerTab :headerArr="headerArr" :findType="skillType" @tabEvent="tabEvent"></headerTab> -->
    <div id="" class="headerTab">
      <span v-for="(item,index) in headerArr" :key="item.key"
      @click="tabEvent(index)"
      :class="{active:idx==index}">{{item}}</span>
    </div>

    <div class="bgWhite" style="display:flex; align-items: center;">
      <tabNav :tabArr="tabArr" @tabEvent="tabNavEvent" class="bgWhite" style="flex:2"></tabNav>
      <span @click="showFilter" style="flex:1; text-align:center;">筛选
        <img src="@/assets/screen_icon.png" alt="" width="15">
      </span>
    </div>
    <div class="0" v-if="!isNeed">

      <v-scroll :on-refresh="onRefresh" :on-infinite="enableInfinite ? onInfinite : undefined" style="bottom:0; top:81px;">
        <noneList v-if="skilllist.length==0"></noneList>
        <div class="bgWhite mb10" v-else v-for="skillItem in skilllist" :key="skillItem.key">
          <serviceItem :skillItem="skillItem" @click.native="toReservation(skillItem)"></serviceItem>
        </div>
      </v-scroll>
    </div>
    <div class="1" v-else>

      <v-scroll :on-refresh="onRefresh" :on-infinite="enableInfinite ? onInfinite : undefined" style="bottom:0; top:81px;">
        <noneList v-if="skilllist.length==0"></noneList>
        <div class="bgWhite mb10" v-else v-for="skillItem in skilllist" :key="skillItem.key">
          <findOrderItem :skillItem="skillItem" @click.native="toReservation(skillItem)"></findOrderItem>
        </div>
      </v-scroll>
    </div>
    <!-- picker -->
    <mt-popup
      v-model="pickerVisible"
      position="right" style="width:100%; height:100vh;">
      <filterPopup @filterEvent="filterEvent"></filterPopup>
    </mt-popup>
  </div>
</template>
<script>
import Vue from 'vue'
import {checkUserAuth,skillList,orderListPending} from '@/utils/ajaxRequest.js';
import vScroll from '@/components/loadMore/loadMore';
export default {
  name: "",
  data: () => ({
    headerArr:['找陪练','找需求'],
    isNeed:false,
    skillType:'',
    tabArr:['距离','费用'],
    token:'',
    skillJson:{
      token:'',
      skillType:'',
      pro_type:'',    //可选类型，技能服务列表刷选使用
      sportsLev:'',   //运动水平
      sex:'',         //性别
      activeAddr:'',    //地址
      lng:'',
      lat:'',
      currentPage:1,    //分页
      orderBy:0,       //排序方式 距离：0；费用：1
      sortType:0,       //0 升序 1降序
    },
    skilllist:'',
    distance_:true,
    payment_:false,   //初始值，显示距离情况，费用是关闭的

    pickerVisible:false,
    idx:0,    //headerTab   idx

    pageNo:1,
    enableInfinite:true,
  }),
  components: {
    headerTab:()=>import('../../template/headerTab'),
    serviceItem:()=>import('../../myService/myServiceItem'),
    findOrderItem:()=>import('./template/findOrderItem'),
    tabNav:()=>import('../../template/tabNav'),
    noneList:()=>import('@/components/noneList/noneList'),
    filterPopup:()=>import('./filterPopup/filterPopup'),
    vScroll,
  },
  methods: {
    onRefresh(done) {   //刷新
      this.pageNo = 1;
       this.getSkillList();
       done() // call done
    },
    onInfinite(done) {    //加载
        let self = this;
        self.enableInfinite = false;
        this.pageNo++;
        this.getSkillList();
        done();
     },
    // 预约下单
    toReservation(item) {
      console.log('下单');
      this.$router.push({name:'reservation',params:{skillItem:item,isNeed:this.isNeed}});
    },
    // 筛选弹出层
    showFilter() {
      this.pickerVisible = true;
    },
    // 关闭弹出层
    filterEvent(data) {
      this.pickerVisible = false;
      this.pageNo = 1;
      console.log(data);
      console.log(data.pro_type.join(','));
      this.skillJson.pro_type = data.pro_type.join(',');
      this.skillJson.sportsLev = data.sportsLevValue;
      this.skillJson.sex = data.sexValue.id;
      // 请求数据
      this.getSkillList();
    },
    // 获取技能列表
    getSkillList() {
      let self = this;
      let skillParam = self.skillJson;
      skillParam.currentPage = self.pageNo;
      if (this.isNeed) {
        // 需求列表
        orderListPending(skillParam).then(res=>{
          console.log(res);
          if (res) {
            let result = res.data.result;
            if (result.length<1) {
              self.enableInfinite = false;    //关闭上拉加载
            }else{
              self.enableInfinite = true;     //打开上拉加载
            }
            if (self.pageNo==1) {
              self.skilllist = result;
            }else{
              self.skilllist = self.skilllist.concat(result);
            }
          }
        })
      }else{
        // 技能列表
        skillList(skillParam).then(res=>{
          console.log(res);
          if (res) {
            let result = res.data.result;
            if (result.length<1) {
              self.enableInfinite = false;    //关闭上拉加载
            }else{
              self.enableInfinite = true;     //打开上拉加载
            }
            if (self.pageNo==1) {
              self.skilllist = result;
            }else{
              self.skilllist = self.skilllist.concat(result);
            }
          }
        })
      }
    },
    tabNavEvent(data) {
      console.log(data);
      this.pageNo = 1;
      let distance = this.distance_;
      let payment = this.payment_;
      if(data==0) {   //距离
        this.skillJson.orderBy = 0;
        this.distance_ = !distance;
        if(this.distance_) {    //true为升序，false为降序
          this.skillJson.sortType = 0;
        }else{
          this.skillJson.sortType = 1;
        }
      }else{    //费用
        this.skillJson.orderBy = 1;
        this.payment_ = !payment;
        if(this.payment_) {    //true为升序，false为降序
          this.skillJson.sortType = 0;
        }else{
          this.skillJson.sortType = 1;
        }
      }
      this.getSkillList();
    },
    // 发布需求
    addEvent(data) {
      if(this.token==''){
        this.messageBox.confirm('您还未登录，前往登录？').then(active=>{
          this.$router.push({name:'login'});
        }).catch(error=>{
          console.log(error);
        })
      }else{
        this.$router.push({path:'/pushNeed',query:{skillType:this.skillType}});
      }

    },
    tabEvent(data) {
      console.log(data);
      this.idx = data;
      this.pageNo = 1;
      if (data==1) {  //需求列表
        this.isNeed = true;
      }else{          //技能列表
        this.isNeed = false;
      }
      this.getSkillList();
    },
    // 获取浏览器所在的定位
    geolocation() {
      let self = this;
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
          var mk = new BMap.Marker(r.point);
          console.log(r.point.lng+','+r.point.lat);
          // 获取经纬度
          self.skillJson.lng = r.point.lng;
          self.skillJson.lat = r.point.lat;
        }
        else {
          alert('failed'+this.getStatus());
        }
      })
    }

  },
  created() {
    //do something after creating vue instance
    this.geolocation();
  },
  mounted() {
    //do something after mounting vue instance
      let skillType = this.$route.query.skillType;
      this.skillType = skillType;
      console.log(skillType);
    let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
    let userToken = xlyd_loginInfo?xlyd_loginInfo.token:'';
    this.token = userToken;
    this.skillJson.token = userToken;
    this.skillJson.skillType = skillType;

    this.$nextTick(()=>{
      if (skillType==0) {
        this.headerArr[0] = '找陪练';
      }else if (skillType==1) {
        this.headerArr[0] = '找圈友';
      }else{
        this.headerArr[0] = '找教练';
      }
    })
      this.getSkillList();
  },
}
</script>
<style lang="scss" scoped>
.headerTab{
  position: fixed;
  top: 0;
  left: 10%;
  right: 12%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  z-index: 999;
  span{
    color: $lightBlue;
    display: inline-block;
    width: 100px;
    text-align: center;
    font-size: 16px;
    &.active{
      color: white;
    }
  }
}
</style>
